$m(function (args) {
    var $this = $(this.element).closest("body");
    var init = function () {
        initQuery();
        $this.find("#gridDiv").height($this.height() - $this.find('#mine-opt-servicelog-grid')[0].getBoundingClientRect().top - 15);
        initServiceLogGrid();
    }
    var initServiceLogGrid = function () {
        $this.find('#mine-opt-servicelog-grid').datagrid({
            datatype: "json",
            url: contextPath + '/api/ai/mine/publish/listServiceLog?time=' + new Date().getTime(),
            fit: true,
            rownumbers: true,
            mtype: 'POST',
            autowidth: true,
            rownumbers: true,
            shrinkToFit: true,
            viewrecords: true,
            striped: true,
            gridComplete: function () {
                $this.find('#mine-opt-servicelog-grid').find(".serviceLog").click(function (e) {
                    serviceLogDialog(e);
                })
            },
            colNames: ['id',
                TempoUtils.locale("aiview.app_name"),//'服务名称'
                TempoUtils.locale("aiview.app_type"),
                TempoUtils.locale("mine.clientName"),
                TempoUtils.locale("mine.diaoyongriqi"),
                TempoUtils.locale("mine.diaoyongjieguo"),
            ],//'操作'
            colModel: [{
                name: 'id',
                index: 'id',
                hidden: true,
                sortable: false
            }, {
                name: 'serviceName',
                index: 'serviceName',
                width: 80,
                sortable: false,
                formatter: function (d, row, rowData) {
                    var maxWidth = '280px';
                    if (window.screen.width == 1366) {
                        maxWidth = '189px';
                    } else if (window.screen.width == 1600) {
                        maxWidth = '231px';
                    }
                    if (rowData.flowType == "plflow" && rowData.type == "sync") {
                        var imgPath = contextPath + "/css/images/pl_icon.png";
                        var html = "<span style='display: inline-flex;overflow: hidden;max-width: " + maxWidth +";'><a href='javascript:;void(0)' serviceId='" + rowData.serviceId + "' class='serviceLog'>" + TempoMineUtils.encodeHTML(rowData.serviceName) + "</a></span>";
                        var plImg = "<img style=' margin-left: 1px;margin-top: 3px;position: absolute;' src='" + imgPath + "'  class='tempo-cgjc-jcxx-sync-service-pl-image'/>";
                        return html += plImg;
                    } else {
                        return "<span style='display: inline-flex;overflow: hidden;max-width: " + maxWidth +";'><a href='javascript:;void(0)' serviceId='" + rowData.serviceId + "' class='serviceLog'>" + TempoMineUtils.encodeHTML(rowData.serviceName) + "</a></span>";
                    }
                }
            }, {
                name: 'serviceType',
                index: 'serviceType',
                width: 80,
                sortable: false,
                formatter: function (obj) {
                    switch (obj) {
                        case "async":
                            return "<sapn  serviceType ='" + obj + "' class='serviceType'>" + TempoUtils.locale("mine.sevTypeAsync") + "</sapn>";
                            ;
                            break;
                        case "sync":
                            return "<sapn  serviceType ='" + obj + "' class='serviceType'>" + TempoUtils.locale("mine.service_sync_service") + "</sapn>";
                            ;
                            break;
                        case "stream":
                            return "<sapn  serviceType ='" + obj + "' class='serviceType'>" + TempoUtils.locale("mine.service_flow_service") + "</sapn>";
                            ;
                        case "gray":
                            return "<sapn  serviceType ='" + obj + "' class='serviceType'>" + "灰度服务" + "</sapn>";
                            ;
                            break;
                    }
                }
            }, {
                name: 'clientName',
                index: 'clientName',
                sortable: false,
                width: 120,
                sortable: false
            }, {
                name: 'runTime',
                index: 'runTime',
                formatter: function (obj, grid, rows, state) {
                    var runTime = rows.runTime;
                    if (runTime) {
                        return DateUtils.formatDateTime(runTime, 'yyyy-MM-dd hh:mm:ss');

                    }
                    return "";
                },
                width: 80,
                sortable: false
            }, {
                name: 'runResult',
                index: 'runResult',
                sortable: false,
                width: 120,
                formatter: function (obj, grid, rows, state) {
                    var success = rows.runResult
                    if (success == 1) {
                        return TempoUtils.locale("mine.chenggong");
                    }
                    if (success == 0) {
                        return TempoUtils.locale("mine.shibai");
                    }
                    return TempoUtils.locale("mine.zhengzaizhixing");
                },
                width: 80
            }
            ],
            pagination: true,
            loadComplete: function (result) {
                var width = $this.find('#gridDiv').width();
                $this.find('#gbox_mine-opt-servicelog-grid').css("width", width + "px");
            }

        })
    }
    var serviceLogDialog = function (e) {
        var sid = $(e.target).attr("serviceid");
        var serviceType = $(e.target).parent().parent().next().find("sapn[class='serviceType']").attr("serviceType");
        $this.find("#serviceLogDialog").remove();
        var serviceLogDialog = $("<div id='serviceLogDialog' style=''/>").appendTo($this);
        serviceLogDialog.dialog({
            width: 1085,
            height: 630,
            autoOpen: true,
            title: TempoUtils.locale("aiview.serviceRun"),
            modal: true,
            resizable: false,
            close: function () {
                serviceLogDialog.dialog("destroy");
                serviceLogDialog.remove();
            },
            open: function () {
                //嵌套的情况下添加样式！
                serviceLogDialog.css("padding", "0px");
                var serviceLogLoad = $("<div id='serviceLogLoad'/>");
                serviceLogLoad.width(1085).height(488);
                serviceLogDialog.append(serviceLogLoad);
                if(serviceType === "gray"){
                    $m.loadPage(contextPath + "/api/ai/app/view/graymonitor?id=" + sid + "&&t=" + TempoUtils.uuid() + "&&ht=488", serviceLogLoad);
                }else {
                    $m.loadPage(contextPath + "/api/ai/app/view/monitor?id=" + sid + "&&t=" + TempoUtils.uuid() + "&&ht=488", serviceLogLoad);
                }
            },
            buttons: [{
                text: TempoUtils.locale("mine.guanbi"),
                click: function () {
                    serviceLogDialog.dialog("close");
                    serviceLogDialog.remove();
                }
            }]
        });
    }
    var initQuery = function () {
        var form = $this.find('#queryForm');
        var process = $("<div/>").tempoprogressbar();
        $.ajax({
            url: contextPath + '/api/ai/webcode/list-enabled-apicode-infos?time=' + new Date().getTime(),
            type: 'post',
            data: {apiId: 'flowPublishServiceInvokeApi'},
            success: function (result) {
                if (result && result.data && result.data.length > 0) {
                    var dsSelect = form.find("#ddClient");
                    var ops = result.data.filter(function (k) {
                        return k.name != null && k.type != "SYSTEM"
                    }).map(function (v) {
                        return v.name;
                    });
                    $("<option/>", {
                        "value": '',
                        "text": TempoUtils.locale("mine.quanbu")
                    }).appendTo(dsSelect);

                    ops.forEach(function (v) {
                        $("<option/>", {
                            "value": v,
                            "text": v
                        }).appendTo(dsSelect);
                    })
                    dsSelect.selectmenu("setValue", '');
                }
            },
            complete: function () {
                process.tempoprogressbar("destroy");
            }
        });
        TempoUtils.parserUi(form, {});
        form.find('[name="serviceType"]').selectmenu({
            change: function () {
                var value = $(this).val();
                if (value == "stream") {
                    form.find('[name="client"]').selectmenu("setValue", "");
                    form.find('[name="client"]').selectmenu("refresh");
                    form.find('[name="client"]').selectmenu("option", "disabled", true);
                } else {
                    form.find('[name="client"]').selectmenu("option", "disabled", false);
                }
            }
        })
        form.find('[name="starttime"]').datepicker({
            dateFormat: "yy-mm-dd",
            yearRange: "c-100:",
            //设置日期的最大时间和最小时间
            minDate: DateUtils.formatDate(new Date(new Date().getFullYear() - 100, 0, 1)),
            maxDate: DateUtils.formatDate(new Date(new Date().getFullYear() + 1, 0, 1)),
            changeYear: true,
            changeMonth: true,
            onClose: function (selectedDate) {
                var d = $(this).datepicker('getDate');
                if (d == null) {
                    return;
                }
                var d2 = new Date(d.getTime());
                var d2str = d2.Format('yyyy-MM-dd');
                form.find('[name="endtime"]').datepicker("option", "minDate", d2str);
            },
            onSelect: function (value) {
//				connectChart();
            },
            onChangeMonthYear: function (year, month, inst) {
                var month = inst.selectedMonth + 1;
                var day = inst.selectedDay;
                var format = function (v) {
                    return String(v).length > 1 ? v : ('0' + v)
                }
                $(this).val(inst.selectedYear + '-' + format(month) + '-' + format(inst.selectedDay));
                $.datepicker._hideDatepicker(this);
            }
        });
        form.find('[name="endtime"]').datepicker({
            dateFormat: "yy-mm-dd",
            yearRange: "c-100:",
            //设置日期的最大时间和最小时间
            minDate: DateUtils.formatDate(new Date(new Date().getFullYear() - 100, 0, 1)),
            maxDate: DateUtils.formatDate(new Date(new Date().getFullYear() + 1, 0, 1)),
            changeYear: true,
            changeMonth: true,
            onSelect: function (value) {
            },
            onClose: function (selectedDate) {
                var d = $(this).datepicker('getDate');
                if (d == null) {
                    return;
                }
                var d2 = new Date(d.getTime());
                var d2str = d2.Format('yyyy-MM-dd');
                form.find('[name="starttime"]').datepicker("option", "maxDate", d2str);
            },
            onChangeMonthYear: function (year, month, inst) {
                var month = inst.selectedMonth + 1;
                var day = inst.selectedDay;
                var format = function (v) {
                    return String(v).length > 1 ? v : ('0' + v)
                }
                $(this).val(inst.selectedYear + '-' + format(month) + '-' + format(inst.selectedDay));
                $.datepicker._hideDatepicker(this);
            }
        });
        form.find('.queryBtn').button({
            click: function () {
                var serviceName = form.find('[name="serviceName"]').val();
                var client = form.find('[name="client"]').val();
                var result = form.find('[name="result"]').val();
                var starttime = form.find('[name="starttime"]').datepicker('getDate');
                var endtime = form.find('[name="endtime"]').datepicker('getDate');
                var serviceType = form.find('[name="serviceType"]').val();
                var data = {
                    serviceName: serviceName,
                    clientName: client,
                    result: result,
                    starttime: starttime ? DateUtils.formatDate(starttime, 'yyyy-MM-dd') : null,
                    endtime: endtime ? DateUtils.formatDate(endtime, 'yyyy-MM-dd') : null,
                    serviceType: serviceType
                }
                $this.find('#mine-opt-servicelog-grid').datagrid('reloadGrid', data);
                return false;
            }
        });
        form.find('.resetBtn').button({
            click: function () {
                form[0].reset();
                form.find('[name="endtime"]').datepicker("option", "minDate", DateUtils.formatDate(new Date(new Date().getFullYear() - 100, 0, 1)));
                form.find('[name="starttime"]').datepicker("option", "maxDate", DateUtils.formatDate(new Date(new Date().getFullYear() + 1, 0, 1)));
                form.find('[name="client"]').selectmenu("option", "disabled", false);
                form.find('[name="result"]').val('').selectmenu('refresh');
                return false;
            }
        });
    }

    init();
    var timeout = 0;
    window.onresize = function () {
        if (timeout != 0) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function () {
            $this.find('#mine-opt-servicelog-grid').datagrid("reloadGrid");
            timeout = 0;
        }, 100)
    }
});	